<template>
  <div class="top_swiper">
    <van-swipe :autoplay="3000" lazy-render space-bettween="9">
      <van-swipe-item v-for="image in state.images" :key="image">
        <div class="img_wrap">
          <img :src="image" />
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getBannerData } from "@/api/home";
import { onMounted, reactive } from "vue";
export default {
  setup() {
    let state = reactive({
      images: [],
    });
    onMounted(() => {
      getBannerData().then((res) => {
        console.log(res.data.banners);
        let banners = res.data.banners;
        // 取出数组中每一项的pic属性组成一个新数组
        state.images = banners.map((item) => item.pic);
      });
    });
    return { state };
  },
};
</script>



<style lang="less" scoped>
.top_swiper {
  padding: 10px;
  background-color: orange;

  .van-swipe {
    height: 150px;
    width: 100%;
    color: blue;
    background-color: orange;
    border-radius: 20px;

    .van-swipe__track {
      border-radius: 20px;
    }
    .van-swipe-item {
      width: 80%;
      height: 150px;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      display: inline-block;

      .img_wrap {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 20px;

        img {
          position: absolute;
          width: 100%;
          height: 150px;
          display: inline-block;
        }
      }
    }
  }
}
</style>